<!DOCTYPE html>
<html>

<head>

    <meta charset="UTF-8">

    <title>CSS3自定义发光radiobox单选框DEMO演示</title>

    <style>
        html {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }

        body {
            padding: 50px;
            background-color: hsl(0,0%,20%);
        }

        input {
            -webkit-appearance: none; /* remove default */
            /*display: block;*/
            margin: 10px;
            width: 32px;
            height: 32px;
            border-radius: 12px;
            /*cursor: pointer;*/
            vertical-align: middle;
            /*box-shadow: hsla(0,0%,100%,.15) 0 1px 1px, inset hsla(0,0%,0%,.5) 0 0 0 1px;*/
            background-color: hsla(0,0%,0%,.2);

            background-repeat: no-repeat;
            /*-webkit-transition: background-position .15s cubic-bezier(.8, 0, 1, 1),*/
            /*-webkit-transform .25s cubic-bezier(.8, 0, 1, 1);*/
        }
        /*input:checked {*/
            /*-webkit-transition: background-position .2s .15s cubic-bezier(0, 0, .2, 1),*/
            /*-webkit-transform .25s cubic-bezier(0, 0, .2, 1);*/
        /*}*/
        /*input:active {*/
            /*-webkit-transform: scale(1.5);*/
            /*-webkit-transition: -webkit-transform .1s cubic-bezier(0, 0, .2, 1);*/
        /*}*/

        /* The up/down direction logic */

        input,
        input:active {
        }
        input:checked {
            background-image: -webkit-radial-gradient( hsla(200,100%,90%,1) 0%, hsla(200,100%,70%,1) 15%, hsla(200,100%,60%,.3) 28%, hsla(200,100%,30%,0) 70% );
        }
        /*input:checked ~ input,*/
        /*input:checked ~ input:active {*/
            /*background-position: 0 -24px;*/
        /*}*/
    </style>

</head>

<body>
<div style="text-align:center;clear:both;">
    <!--<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>-->
    <!--<script src="/follow.js" type="text/javascript"></script>-->
</div>
<div style="margin:30px auto;width:80px;">
    <input type="radio" name="name" checked id="a"><label for="a">吃</label>
    <input type="radio" name="name" />
    <input type="radio" name="name" />
    <input type="radio" name="name" />
    <input type="radio" name="name" />
</div>
<!--<script src="js/index.js"></script>-->

</body>

</html>